	@keyframes rotate {
			100% {
				transform: rotate(360deg);
			}
		}
        /* 导入字体 */
        @font-face{
            font-family:'myfont';
            src: url('../font/《一碗东坡肉》字体.otf');
        }
		* {
            font-family: 'myfont';
			margin: 0 auto;
			padding: 0;
			border: 0;
			list-style: none;
			text-decoration: none;
		}

		main {
			overflow: hidden;
			position: relative;
			/* margin-top: 20px; */
			width: 414px;
			height: 736px;
			/* background-color: rgb(206, 163, 219); */
			background-image: url(../img/img/bg2.jpg);
			background-size: 100% 100%;

		}

		#meat {
			/* with 210px */
			width: 50%;
			/* height 256px */
			height: 40%;
		}

		#start {
			position: absolute;
			right: 0;
			display: block;
			width: 100%;
			height: 100%;
			background-image: url('../img/img/bg2.jpg');
			background-size: 100% 100%;
			/* text-align: center; */
			transition: all 1s;
		}

		#meat img {
			margin-top: 126px;
			width: 100%;
			height: 90%;
			/* top 640-256  /2  = */

		}

		#meat h2{
			margin-left: 50px;
		}
		#first {
			transition: all 1s;
			position: absolute;
			top: 0;
			display: none;
			width: 100%;
			height: 100%;
			background-color: #e49e9e;
			background-image: url('../img/img/bg1.jpg');
			background-size: 100% 100%;
		}

		#second {
			transition: all 1s;
			top: 100%;
			bottom: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: rgb(92, 107, 246);
			background-image: url('../img/img/bg1.jpg');
			background-size: 100% 100%;
		}

		#third{
			/* text-align: center; */
			transition: all 1s;
			top: 100%;
			position: absolute;
			width: 100%;
			height: 100%;
			background-color: rgb(59, 43, 43);
			background-image: url('../img/img/bg1.jpg');
			background-size: 100% 100%;

		}

		#outer {
			position: relative;
			left: 5px;
			width: 1000px;
			height: 1000px;
			top: -120px;
			border-radius: 50%;
			border-style: solid;
			border-color: cadetblue;
			border-width: 1px;
			border-right: none;
			border-bottom: none;
			border-top: none;
		}

		#ci-1 {
            
			position: absolute;
			left: 110px;
			top: -20px;
			width: 800px;
			height: 800px;
			border-radius: 50%;
			border-style: solid;
			border-color: cadetblue;
			border-width: 1px;
			border-right: none;
			/* border-bottom: none; */
			/* border-top: none; */
		}

		#ci-2 {
			position: absolute;
			left: 100px;
			top: 110px;
			width: 560px;
			height: 560px;

			border-radius: 50%;
			border-style: dashed;
			border-color: cadetblue;
			border-width: 1px;
			border-right: none;
			/* border-bottom: none; */
			/* border-top: none; */
		}

		#ci-3 {
			position: absolute;
			left: 90px;
			top: 80px;
			width: 400px;
			height: 400px;

			border-radius: 50%;
			border-style: dashed;
			border-color: cadetblue;
			border-width: 2px;
			border-right: none;
			/* border-bottom: none; */
			/* border-top: none; */
		}

		#rou1 {
			width: 85px;
			height: 85px;
			top: 120px;
			left: 170px;
			border-radius: 50%;
			/* background-color: rgb(209, 84, 84); */
			background-image: url('../img/自转动图/bingtang.gif');
			background-size: 100% 100%;
			position: absolute;
			/* 变换原点 */
			/* x轴距离和y轴距离 */

			transform-origin: 200px 270px;
			animation: rotate 10s infinite linear;
		}

		#rou2 {
			width: 85px;
			height: 85px;
			top: 580px;
			left: 178px;
			border-radius: 50%;
			/* background-color: rgb(188, 209, 240); */
			background-image: url('../img/自转动图/zhurou.gif');
			background-size: 100% 100%;
			position: absolute;
			/* 变换原点 */
			/* x轴距离和y轴距离 */

			transform-origin: 200px -180px;
			animation: rotate 10s infinite linear;
		}

		#rou3 {
			width: 85px;
			height: 85px;
			top: 310px;
			left: 60px;
			border-radius: 50%;
			/* background-color: rgb(131, 168, 63); */
			background-image: url('../img/自转动图/bajiao.gif');
			background-size: 100% 100%;
			position: absolute;
			/* 变换原点 */
			/* x轴距离和y轴距离 */

			transform-origin: 320px 70px;
			animation: rotate 10s infinite linear;
		}

		#rou4 {
			width: 85px;
			height: 85px;
			top: 310px;
			left: -30px;
			border-radius: 50%;
			/* background-color: rgb(34, 18, 18); */
			background-image: url('../img/自转动图/congjiang.gif');
			background-size: 100% 100%;
			position: absolute;

			/* 变换原点 */
			/* x轴距离和y轴距离 */

			transform-origin: 450px 90px;
			animation: rotate 10s infinite linear;
		}

		#rou5 {
			width: 85px;
			height: 85px;
			top: 310px;
			left: 615px;
			border-radius: 50%;
			/* background-color: rgb(131, 168, 63); */
			background-image: url('../img/自转动图/huangjiu.gif');
			background-size: 100% 100%;
			position: absolute;
			/* 变换原点 */
			/* x轴距离和y轴距离 */

			transform-origin: -230px 80px;
			animation: rotate 10s infinite linear;
		}

		#rightRou {
			position: absolute;
			top:80px;
			right:180px;
			width: 300px;
			height: 200px;
		}

		.logo {
			left: 41%;
			top: 20px;
			position: absolute;
			color: rgb(163, 8, 3);
			text-align: center;
			width: 18%;
			height: 10%;
		}

		#first-wenan {
			letter-spacing: 6px;
			position: absolute;
			top: 21%;
			left: 5%;
			color: rgb(163, 8, 3)
		}

		#nextPage {
			text-align: center;
			position: absolute;
			top: 88%;
			left: 3%;
			width: 18%;
			height: 10%;
		}

		.music-icon{
			position: absolute;
			top: 1%;
			left: 89%;
			width: 40px;
			height: 40px;
			z-index: 999;

		}
		#food-bg{
			position: absolute;
			width: 66%;
			height: 60%;
			top: 10%;
			left: 34%;
		}
		#WA{
			color:  rgb(163, 8, 3);
			font-size: 28px;
			position: absolute;
			width: 78%;
			height: 25%;
			top: 30%;
			left: 9%;
			/* border: 2px solid red ; */
		}
		#tip{
			color: rgb(163, 8, 3);
			font-size: 18px;
			position: absolute;
			width: 80%;
			height: 10%;
			top: 62%;
			left:9%;
			/* border: 1px solid red; */
		}
		#food-choose{
			position: absolute;
			width: 82%;
			height: 13%;
			top: 80%;
			left: 9%;
			/* border: 1px dashed red; */
		}
		.food{
			width: 30%;
			height: 100%;
			float: left;
			/* border:1px solid blue ; */
		}
	    .food1:first-child{
			box-shadow: 0 0 6px rgb(229, 255, 0);
		}
		/*.foo1:hover{
			box-shadow: 0 0 6px rgb(229, 255, 0);
		}
		.food2:hover{
			box-shadow: 0 0 6px rgb(229, 255, 0);
		} */
		.food img{
			width: 100%;
			height: 100%;
		}
		.next{
			width: 7%;
			position: absolute;
			top: 95%;
			left: 45%;
		}
		#zhurousong{
			position: absolute;
			width: 80%;
			top: 10%;
			left: 10%;
		}
		#last-rou{
			width: 50%;
			top: 55%;
			position: absolute;
			left: 25%;
		}
		#zhuobu{
			width: 100%;
			height: 30%;
			position: absolute;
			top: 70%;
		}
		



	
        